@mixin device-pixel($url) {
  background-image: url($url + '.png');
  @media (-webkit-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    background-image: url($url + '@2x.png');
  }
  //@media (-webkit-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  //  background-image: url($url + "@3x.png");
  //}
}

//文字超出隐藏
@mixin text-overflow($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

//层级管理
$z-layers: (
  'default': 1,
  'below': -1,
  'head': 100,
  'audio': 70,
  'enhanced': (
    'header': 50,
    'section': 40
  ),
  'side-popup': 60
);

//获取层级
@function z($layers...) {
  $keys: '';
  @each $layer in $layers {
    $keys: $keys + '.' + $layer;
  }
  $keys: str-slice($keys, 2);
  $output: map-find($z-layers, $keys);
  @if $output == null {
    @warn 'No layer found for `#{inspect($layers)}` in $z-layers map. Property omitted.';
  }
  @return $output;
}

@function map-find($map, $keys) {
  @while str-index($keys, '.') {
    $index: str-index($keys, '.');
    // Child elements
    $map: map-get($map, str-slice($keys, 0, $index - 1));
    @if type-of($map) != map {
      @return null;
    }
    // Rest key
    $keys: str-slice($keys, $index + 1);
  }
  @return map-get($map, $keys);
}
